import React from 'react';

// 春雨图标 - 四个绿色方块
export const ChunyuIcon: React.FC<{ className?: string }> = ({ className }) => (
  <div className={className} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2px', width: '20px', height: '20px' }}>
    <div style={{ width: '8px', height: '8px', backgroundColor: '#42d16a', borderRadius: '2px' }}></div>
    <div style={{ width: '8px', height: '8px', backgroundColor: '#42d16a', borderRadius: '2px' }}></div>
    <div style={{ width: '8px', height: '8px', backgroundColor: '#42d16a', borderRadius: '2px' }}></div>
    <div style={{ width: '8px', height: '8px', backgroundColor: '#42d16a', borderRadius: '2px' }}></div>
  </div>
);

// 商城图标 - 购物袋
export const MallIcon: React.FC<{ className?: string }> = ({ className }) => (
  <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m0 0h6M9 18h6" />
  </svg>
);

// 慧问AI图标 - 彩色花瓣
export const AIIcon: React.FC<{ className?: string }> = ({ className }) => (
  <div className={className} style={{ position: 'relative', width: '24px', height: '24px' }}>
    <div style={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '20px',
      height: '20px',
      background: 'linear-gradient(135deg, #ff6b9d, #42d16a, #4fc3f7, #ffeb3b)',
      borderRadius: '50%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div style={{
        width: '12px',
        height: '12px',
        background: 'white',
        borderRadius: '50%'
      }}></div>
    </div>
  </div>
);

// 我的订单图标 - 文档列表
export const OrderIcon: React.FC<{ className?: string }> = ({ className }) => (
  <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
    <polyline points="14,2 14,8 20,8" />
    <line x1="16" y1="13" x2="8" y2="13" />
    <line x1="16" y1="17" x2="8" y2="17" />
    <polyline points="10,9 9,9 8,9" />
  </svg>
);

// 个人中心图标 - 用户头像
export const UserIcon: React.FC<{ className?: string }> = ({ className }) => (
  <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
    <circle cx="12" cy="7" r="4" />
  </svg>
);
